<template>
    <div class="left-bar">
        <el-menu router unique-opened :default-active="defaultActive" class="el-menu-vertical-demo" :collapse="isCollapse" background-color="#304156" text-color="#bfcbd9">
            <el-menu-item index="index">
                <i class="el-icon-monitor"></i>
                <span slot="title">首页</span>
            </el-menu-item>

            <left-bar-item :menuItems="menuItems" :isCollapse="isCollapse"/>


            <!--<el-submenu index="1">
                <template slot="title">
                    <i class="el-icon-s-home"></i>
                    <span slot="title">组织管理</span>
                </template>
                <el-submenu index="1">
                    <template slot="title">
                        <i class="el-icon-s-home"></i>
                        <span slot="title">组织管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="/office">公司信息</el-menu-item>
                        <el-menu-item index="/user">用户管理</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </el-submenu>-->

            <!--<el-submenu index="2">
                <template slot="title">
                    <i class="el-icon-s-ticket"></i>
                    <span slot="title">权限管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="/role">角色管理</el-menu-item>
                    <el-menu-item index="/menuRole">权限分配</el-menu-item>
                </el-menu-item-group>
            </el-submenu>

            <el-submenu index="3">
                <template slot="title">
                    <i class="el-icon-s-custom"></i>
                    <span slot="title">系统管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="/menu">菜单管理</el-menu-item>
                    <el-menu-item index="/param">参数设置</el-menu-item>
                    <el-menu-item>日志管理</el-menu-item>
                </el-menu-item-group>
            </el-submenu>

            <el-submenu index="4">
                <template slot="title">
                    <i class="el-icon-s-custom"></i>
                    <span slot="title">界面管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="/colunm">栏目划分</el-menu-item>
                </el-menu-item-group>
            </el-submenu>

            <el-submenu index="5">
                <template slot="title">
                    <i class="el-icon-s-custom"></i>
                    <span slot="title">栏目管理一</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="/swiper">轮播图</el-menu-item>
                    <el-menu-item index="/service">服务管理</el-menu-item>
                    <el-menu-item index="/honor">荣誉资质</el-menu-item>
                    <el-menu-item index="/case">客户案例</el-menu-item>
                    <el-menu-item index="/culture">企业风采</el-menu-item>
                </el-menu-item-group>
            </el-submenu>

            <el-submenu index="6">
                <template slot="title">
                    <i class="el-icon-s-custom"></i>
                    <span slot="title">栏目管理二</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="/notice">公告管理</el-menu-item>
                    <el-menu-item index="/news">新闻管理</el-menu-item>
                    <el-menu-item index="/job">招聘管理</el-menu-item>
                    <el-menu-item index="/message">留言管理</el-menu-item>
                    <el-menu-item index="/productType">产品分类</el-menu-item>
                    <el-menu-item index="/product">产品管理</el-menu-item>
                </el-menu-item-group>
            </el-submenu>

            <el-submenu index="7">
                <template slot="title">
                    <i class="el-icon-s-custom"></i>
                    <span slot="title">栏目管理三</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="/link">友情链接</el-menu-item>
                    <el-menu-item index="/about">关于我们</el-menu-item>
                </el-menu-item-group>
            </el-submenu>-->




        </el-menu>
    </div>
</template>

<script>

    import New from '@/js/eventBus.js'
    import leftBarItem from './LeftBarItem'

    export default {
        name: "LeftBar",
        components:{
            leftBarItem
        },
        data() {
            return {
                isCollapse: false,
                defaultActive:'1',
                menuItems: this.$store.getters.getCmsMenu,
                //routerItems:this.$store.getters.getCmsRouter,
            };
        },
        methods: {
        },
        created() {
            New.$on("on-left-bar", data => {
                this.isCollapse = data
            });
        },

    }
</script>

<style scoped>
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
    }

    .left-bar {
        position: fixed;
        float: left;
        height: 100%;
        background: #304156;
    }

    ul li {
        background-color: #2b2f3a !important;
        margin-top: 0px;
    }

    ul li:hover {
        background-color: #001528 !important;
    }

    .menu-bottom {
        background-color: #304156 !important;
    }
    .jx-mayun{
        text-decoration: none;
        color: rgb(191, 203, 217);
    }
</style>